<template>
  <view class="order-details">
    <view v-if="order">
      <view class="order-header">
        <text>订单号：{{ order.order_id }}</text>
        <text>状态：{{ order.status_text || '待支付' }}</text>
      </view>
      <view class="order-goods-list">
        <view v-for="goods in goodsList" :key="goods.id" class="goods-item">
          <image :src="goods.thumb_path || goods.image || goods.thumb || goods.pic || '/static/logo.png'" class="goods-img" mode="aspectFill" />
          <view class="goods-info">
            <text class="goods-title">{{ goods.title }}</text>
            <text class="goods-count">x{{ goods.count || goods.number || 1 }}</text>
            <text class="goods-price">¥{{ goods.sell_price }}</text>
          </view>
        </view>
      </view>
      <view class="order-footer">
        <text>下单时间：{{ order.add_time || order.create_time }}</text>
        <text>合计：¥{{ order.total_price }}</text>
      </view>
      <!-- 待支付状态显示立即支付按钮 -->
      <view v-if="order.status === 0 || order.status === '0'" class="pay-btn-bar">
        <button class="pay-btn" @click="handlePay(order)">立即支付</button>
      </view>
      <text>order.status: {{ order.status }}</text>
    </view>
    <view v-else>
      <text>加载中...</text>
    </view>
  </view>
</template>

<script setup lang="ts">
// filepath: pages/Order_details/Order_details.vue
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { request, BASE_URL } from '@/Requset/request'

const order = ref<any>(null)
const goodsList = ref<any[]>([])

onLoad(async (options) => {
  const order_id = String(options.order_id)
  if (!order_id) {
    uni.showToast({ title: '订单号缺失', icon: 'none' })
    return
  }
  const token = uni.getStorageSync('token')
  // 1. 获取订单详情
  const res = await request({
    url: BASE_URL + 'api/getorder?order_id=' + encodeURIComponent(order_id),
    method: 'POST',
    header: {
      token,
      'content-type': 'application/x-www-form-urlencoded'
    }
  })
  if (res.data && res.statusCode === 200) {
    order.value = res.data.message && typeof res.data.message === 'object'
      ? res.data.message
      : res.data

    // 2. 批量获取商品明细
    if (order.value.goods_ids) {
      const goodsRes = await request({
        url: BASE_URL + 'api/getshopcarlist/' + order.value.goods_ids,
        method: 'GET',
        header: { token } // 一定要带上 token
      })
      if (goodsRes.data && Array.isArray(goodsRes.data.message)) {
        goodsList.value = goodsRes.data.message
      } else if (Array.isArray(goodsRes.data)) {
        goodsList.value = goodsRes.data
      } else {
        goodsList.value = []
      }
    }
  }
})

// 立即支付按钮点击事件
function handlePay(order) {
  // 保存订单相关数据到本地
  uni.setStorageSync('orderGoods', goodsList.value)
  uni.setStorageSync('orderId', order.order_id)
  uni.setStorageSync('orderTotalPrice', order.total_price)
  // 跳转到订单支付页面
  uni.navigateTo({
    url: '/pages/Order_page/Order_page'
  })
}
</script>

<style scoped>
.order-details { padding: 24rpx; }
.order-header { margin-bottom: 16rpx; }
.order-goods-list { margin-bottom: 16rpx; }
.goods-item { display: flex; align-items: center; margin-bottom: 8rpx; }
.goods-img { width: 80rpx; height: 80rpx; border-radius: 8rpx; margin-right: 16rpx; background: #f7f7f7; }
.goods-info { flex: 1; }
.goods-title { font-size: 26rpx; color: #222; }
.goods-count { margin-left: 12rpx; color: #888; }
.goods-price { margin-left: 12rpx; color: #e64340; }
.order-footer { color: #888; font-size: 24rpx; }
.pay-btn-bar { margin-top: 32rpx; text-align: right; }
.pay-btn { background: #e64340; color: #fff; border: none; border-radius: 8rpx; padding: 16rpx 48rpx; font-size: 28rpx; }
</style>